<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.keyword" placeholder="关键字" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getTableData" icon="el-icon-search" size="small">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" size="small" v-on:click="add">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="tableData" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="ID">
      </el-table-column>
      <el-table-column prop="ip" label="IP">
      </el-table-column>
      <el-table-column prop="phone" label="手机号">
      </el-table-column>
      <el-table-column prop="reason" label="原因">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template scope="scope">
          <el-button type="danger" size="small" @click="remove(scope.row)" icon="el-icon-remove">移除黑名单</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0" icon="el-icon-remove" size="small">
        批量删除
      </el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total"
                     style="float:right;">
      </el-pagination>
    </el-col>


  </section>
</template>

<script>

export default {
  data() {
    return {
      addFormVisible: false,
      addForm: {
        ip: "",
        phone: '',
        reason: '',
      },
      filters: {
        keyword: ''
      },
      tableData: [],
      total: 0,
      page: 1,
      listLoading: false,
      sels: []
    }

  },
  methods: {
    selsChange(sels) {
      this.sels = sels;
    },

    remove(row) {
      this.$http.delete("/common/shield/delete/"+row.id).then(result => {
          if (result.data.success){
            this.$message({message: "移除成功【√】", type: 'success'});
            this.getTableData()
          }
      }).catch(error => {
        this.listLoading = false;
        this.$message({message: "数据加载失败[" + error.message + "]", type: 'error'});
      })
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getTableData();
    },
    cancel() {
      this.addForm.reason = ''
    },


    //获取用户列表
    getTableData() {
      let para = {
        page: this.page,
        keyword: this.filters.keyword
      };
      this.listLoading = true; //显示加载圈
      this.$http.post("/common/shield/list", para).then(result => {
        this.total = result.data.total;
        this.tableData = result.data.data;
        this.listLoading = false;  //关闭加载圈
      }).catch(error => {
        this.listLoading = false;
        this.$message({message: "数据加载失败[" + error.message + "]", type: 'error'});
      })
    },
    edit() {
      this.$message({message: "功能未开放", type: 'error'});
    },
    del() {
      this.$message({message: "功能未开放", type: 'error'});
    },
    batchRemove() {
      this.$message({message: "功能未开放", type: 'error'});
    },
    add() {
      this.$message({message: "功能未开放", type: 'error'});
    },

  },
  mounted() {
    this.getTableData();
  }
}

</script>

<style scoped>

</style>